<div class="register-main">
  <div class="loading" *ngIf="registering"></div>
  <div class="register-block">
    <form id="userRigterForm" [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="form-horizontal registerForm">
      <div class="form-group row">
        <label for="userSub_username" class="col-sm-2 control-label">登录名</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userSub_username" formControlName="userSub_username">
          <span class="error-info" style="color: red">{{formErrors.userSub_username}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_email" class="col-sm-2 control-label">邮箱</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userInfoSub_email" formControlName="userInfoSub_email">
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_email}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label for="password" class="col-sm-2 control-label">密码</label>

        <div class="col-sm-10">
          <input type="password" class="form-control" id="password" formControlName="password">
          <span class="error-info" style="color: red">{{formErrors.password}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label for="passwordRepeat" class="col-sm-2 control-label">确认密码</label>

        <div class="col-sm-10">
          <input type="password" class="form-control" id="passwordRepeat" formControlName="passwordRepeat">
          <span class="error-info" *ngIf="registerForm.hasError('mismatchedPasswords')"  style="color: red">确认密码和密码不匹配.</span>

        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_name" class="col-sm-2 control-label">姓名</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userInfoSub_name" formControlName="userInfoSub_name">
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_name}}</span>

        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_sex" class="col-sm-2 control-label">性别</label>

        <div class="col-sm-10">
          <select class="form-control" id="userInfoSub_sex" formControlName="userInfoSub_sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_sex}}</span>
        </div>
      </div>

      <div class="form-group row">
        <label for="userInfoSub_idcard" class="col-sm-2 control-label">身份证号码</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userInfoSub_idcard" formControlName="userInfoSub_idcard">
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_idcard}}</span>
        </div>
      </div>
      <div class="form-group row">
      <label for="userInfoSub_birthday" class="col-sm-2 control-label">出生日期</label>
      <div class="col-sm-10">
        <datepicker (onSelected)="updateDateRange($event,'userInfoSub_birthday')"></datepicker>

        <span class="error-info" style="color: red">{{formErrors.userInfoSub_birthday}}</span>

      </div>
    </div>

      <div class="form-group row">
        <label for="userInfoSub_folk" class="col-sm-2 control-label">民族</label>

        <div class="col-sm-10">
          <select class="form-control" id="userInfoSub_folk" formControlName="userInfoSub_folk">
            <option [value]="race" *ngFor="let race of races">{{race}}</option>
          </select>
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_folk}}</span>
        </div>
      </div>

      <div class="form-group row">
        <label for="userInfoSub_province" class="col-sm-2 control-label">省份</label>

        <div class="col-sm-10">
          <select class="form-control" id="userInfoSub_province" formControlName="userInfoSub_province">
            <option [value]="province" *ngFor="let province of provinces">{{province}}</option>
          </select>
        </div>
      </div>

      <div class="form-group row">
        <label for="userInfoSub_government" class="col-sm-2 control-label">政治面貌</label>

        <div class="col-sm-10">
          <select class="form-control" id="userInfoSub_government" formControlName="userInfoSub_government">
            <option [value]="politicalStatus" *ngFor="let politicalStatus of politicalStatuses">{{politicalStatus}}
            </option>
          </select>
        </div>
      </div>

      <div class="form-group row">
        <label for="userInfoSub_telephone" class="col-sm-2 control-label">电话</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userInfoSub_telephone" formControlName="userInfoSub_telephone">
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_telephone}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_postcode" class="col-sm-2 control-label">邮编</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userInfoSub_postcode" formControlName="userInfoSub_postcode">
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_postcode}}</span>

        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_address" class="col-sm-2 control-label">地址</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userInfoSub_address" formControlName="userInfoSub_address">
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_address}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_addressinfo" class="col-sm-2 control-label">详细地址</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userInfoSub_addressinfo"
                 formControlName="userInfoSub_addressinfo">
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_addressinfo}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_technicaltitles" class="col-sm-2 control-label">技术职称</label>
        <div class="col-sm-10">
          <select class="form-control" id="userInfoSub_technicaltitles" formControlName="userInfoSub_technicaltitles">
            <option [value]="technicaltitles" *ngFor="let technicaltitles of technicaltitles">{{technicaltitles}}</option>
          </select>
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_technicaltitles}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_education" class="col-sm-2 control-label">学历</label>
        <div class="col-sm-10">
          <select class="form-control" id="userInfoSub_education" formControlName="userInfoSub_education">
            <option [value]="education" *ngFor="let education of educations">{{education}}</option>
          </select>
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_education}}</span>
        </div>
      </div>

      <div class="form-group row">
        <label for="userInfoSub_schoolname" class="col-sm-2 control-label">毕业学校</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userInfoSub_schoolname" formControlName="userInfoSub_schoolname">
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_schoolname}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_finishschooldate" class="col-sm-2 control-label">毕业日期</label>
        <div class="col-sm-10">
          <datepicker (onSelected)="updateDateRange($event,'userInfoSub_finishschooldate')"></datepicker>
        </div>
      </div>
      <div class="form-group row">
        <label for="userInfoSub_speciality" class="col-sm-2 control-label">专业</label>

        <div class="col-sm-10">
          <input type="text" class="form-control" id="userInfoSub_speciality" formControlName="userInfoSub_speciality">
          <span class="error-info" style="color: red">{{formErrors.userInfoSub_speciality}}</span>
        </div>
      </div>

      <div class="form-group row">
        <label for="enterpriseName" class="col-sm-2 control-label">企业名称</label>

        <div class="col-sm-10">
          <select name="enterpriseName" class="js-states form-control" id="enterpriseName" style="width: 100%"></select>
          <input type="text" class="form-control" id="enterpriseName" placeholder="不填为个人">
        </div>
      </div>

      <div class="row" *ngIf="registerError" style="text-align: center;">
        <span class="error-info" style="color: #d9534f;">{{errorMsg}}</span>
      </div>

      <div class="form-group row">
        <div class="col-sm-10">
          <button type="submit" class="btn btn-primary btn-auth" [disabled]="!registerForm.valid">注册</button>
        </div>
        <div class="col-sm-2 to-login">
          <a routerLink="/login/user">已有账号？</a>
        </div>
      </div>
    </form>
  </div>
</div>

<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true"
     (onHide)="onHideModal()">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" aria-label="Close" (click)="hideSuccessModal()">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">注册提交成功</h4>
      </div>
      <div class="modal-body">
        注册提交成功，点击确定跳转到主页。
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary confirm-btn" (click)="redirect()">确定</button>
      </div>
    </div>
  </div>
</div>
